<template>
  <view class="card-list">
    <view class="top-bg"></view>
    <view class="c-volume2" v-if="list3 && list3.length">
      <!-- <u-swiper
        :list="list3"
        imgMode="Widthfix"
        indicatorMode="line"
        circular
        :keyName="obj.bankName"
        indicator
        @change="changeFun"
        :autoplay="false"
      >
      </u-swiper> -->
      <swiper
        :indicator-dots="true"
        :autoplay="false"
        :interval="3000"
        :duration="3000"
        @change="changeFun"
        indicator-color="#eee"
        indicator-active-color="#fff"
      >
        <swiper-item class="s-item" v-for="(item, index) in list3" :key="index">
          <!-- <image :src="banner1" class="slide-image" width="355" height="200" /> -->
          <u--image
            :src="banner1"
            imgMode="Widthfix"
            :width="widthPic"
            height="150"
            class="slide-image"
          ></u--image>
          <view class="swiper-box">
            <view class="sw-item">
              <u--image :src="icon1" width="36px" height="36px"></u--image>
              <text class="name1">{{ obj.bankName }}</text>
            </view>
            <view class="name2" v-if="obj.bankId">{{
              `**** **** **** **** ` + cardId
            }}</view>
            <view class="name3">
              <text class="name4">持卡人：{{ obj.realName }}</text>
              <text class="name5" @click="toPage">编辑</text>
            </view>
          </view>
        </swiper-item>
      </swiper>

      <view class="card-i">
        <u--image :src="icon2" width="36px" height="36px"></u--image>
        <view class="card-r">
          <view class="card-t"
            ><text>{{ obj.bankName }}</text
            ><text class="card-g" @click="del(obj.id)">解除绑定</text></view
          >
          <view class="card-b">尾号{{ cardId }}</view>
        </view>
      </view>

      <view class="content">
        <u-cell-group>
          <u-cell @click="show1 = true" arrow-direction="right">
            <view slot="title" class="u-slot-title1">
              <text class="u-cell3">开户行所在地</text>
            </view>
            <view slot="value" class="tips1">
              <text class="u-cell4">{{
                cardObj.provinceName + cardObj.cityName + cardObj.areaName
              }}</text>
            </view>
          </u-cell>
          <u-cell @click="show2 = true" arrow-direction="right">
            <view slot="title" class="u-slot-title1">
              <text class="u-cell3">支行名称</text>
            </view>
            <view slot="value" class="tips1">
              <text class="u-cell4">{{ cardObj.bankAddress || "--" }}</text>
            </view>
          </u-cell>
          <u-cell @click="show3 = true" arrow-direction="right">
            <view slot="title" class="u-slot-title1">
              <text class="u-cell3 grey"
                >准确的开户行信息，将会加快提现到账速度</text
              >
            </view>
          </u-cell>
        </u-cell-group>
      </view>
    </view>
    <view class="c-volume2" v-else @click="toAddCard">
      <view class="no-card"
        >暂无银行卡，<text class="y-color">立即添加</text></view
      >
    </view>
    <view class="bottom" @click="toAddCard">添加银行卡</view>
  </view>
</template>

<script>
import { setStoreData, getStoreData, httpGet, dealNum } from "@/utils/http.js";
const banner1 = require(`@/img/my/bank1.png`);
const icon1 = require(`@/img/my/bank-icon2.png`);
const icon2 = require(`@/img/my/bank-icon1.png`);
export default {
  data() {
    return {
      dealNum,
      banner1,
      icon1,
      icon2,
      cardId: "",
      obj: {},
      cardObj: {},
      cardList: [],
      current: 0,
      list3: [],
      widthPic: 343,
    };
  },
  onShow() {
    this.getCardList();
    this.widthPic = getStoreData("screenWidth") - 32;
  },
  methods: {
    toAddCard() {
      setStoreData("cardObjNew", {});
      uni.navigateTo({
        url: "/pages/user/my-card-edit",
      });
    },
    toPage() {
      setStoreData("cardObjNew", this.obj);
      uni.navigateTo({
        url: "/pages/user/my-card-edit",
      });
    },
    del(id) {
      const _this = this;
      httpGet("/api/userbankcard/delete/" + id)
        .then((res) => {
          uni.$u.toast("解绑成功");
          _this.getCardList();
        })
        .catch((e) => {
          //
        });
    },
    changeFun(e) {
      this.current = e.detail.current;
      this.obj = this.cardList[this.current];
      this.cardId = this.obj.bankId.substring(
        this.obj.bankId.length - 4,
        this.obj.bankId.length
      );
      this.cardDetail(this.obj.id);
    },
    cardDetail(id) {
      const _this = this;
      httpGet("/api/userbankcard/info/" + id)
        .then((res) => {
          _this.cardObj = res.data;
        })
        .catch((e) => {
          _this.cardObj = {};
        });
    },
    getCardList() {
      const _this = this;
      httpGet("/api/userbankcard/list")
        .then((res) => {
          _this.cardList = res.data;
          _this.list3 = res.data.map((i, index) => {
            if (index === 0) {
              _this.obj = i;
              _this.cardId = i.bankId.substring(
                i.bankId.length - 4,
                i.bankId.length
              );
              _this.cardDetail(i.id);
            }
            return _this.banner1;
          });
        })
        .catch((e) => {
          _this.cardList = res.data;
          _this.list3 = [];
          _this.obj = {};
        });
    },
  },
};
</script>
<style lang="scss">
.card-list {
  background: #f2f2f2;
  min-height: 100vh;
  position: relative;
  /deep/.u-cell__body__content {
    min-width: 70px;
  }
  .bottom {
    position: absolute;
    bottom: 0;
    height: 50px;
    width: 100vw;
    left: 0;
    display: flex;
    color: #fff;
    padding-bottom: 10px;
    justify-content: center;
    align-items: center;
    background: linear-gradient(90deg, #3cbaf6, #56d1fc);
  }
  .u-cell3 {
    &.grey {
      color: #aaa;
    }
  }
  .content {
    background: #fff;
    border-radius: 4px;
    padding: 0 16px;
    box-sizing: border-box;
    margin-bottom: 16px;
    flex-direction: column;
    width: calc(100vw - 32px);
    /deep/.u-cell__body {
      padding: 16px 0 !important;
    }
    /deep/.u-cell-group__wrapper {
      .u-line:first-child,
      .u-cell:last-child .u-line {
        display: none !important;
      }
    }
  }
  .card-b {
    color: #aaaaaa;
    margin-top: 2px;
  }
  .card-g {
    color: #aaaaaa;
  }
  .card-i {
    margin: 24px 0;
    width: 100%;
    height: 60px;
    background: #ffffff;
    border-radius: 10px;
    display: flex;
    font-size: 14px;
    align-items: center;
    padding: 0 12px;
    box-sizing: border-box;
  }
  .card-r {
    display: flex;
    width: 100%;
    margin-left: 6px;
    flex-direction: column;
  }
  .card-t {
    display: flex;
    justify-content: space-between;
  }
  .name5 {
    width: 62px;
    height: 30px;
    color: #fff;
    text-align: center;
    line-height: 30px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 30px 0px 0px 30px;
  }
  .name4 {
    color: #fff;
    line-height: 30px;
    font-size: 16px;
  }
  .sw-item {
    display: flex;
    align-items: center;
    margin-left: 24px;
    margin-top: 24px;
  }
  .c-volume2 {
    margin: -84px 16px 0 16px;
    position: relative;
    .no-card {
      background: #fff;
      height: 70vh;
      width: 100%;
      border-radius: 10px;
      font-size: 14px;
      color: #666;
      text-align: center;
      padding-top: 100px;
      .y-color {
        color: #f39d21;
      }
    }
  }
  .slide-image {
    min-height: 150px;
  }
  .swiper-box {
    width: 100%;
    height: calc(100% - 20px);
    position: absolute;
    left: 0;
    top: 0;
    .name1 {
      font-size: 16px;
      margin-left: 8px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
    }
    .name2 {
      font-size: 24px;
      margin-left: 24px;
      font-family: PingFang SC;
      color: #ffffff;
      margin-top: 12px;
    }
    .name3 {
      margin-left: 24px;
      display: flex;
      justify-content: space-between;
    }
  }
  .top-bg {
    width: 100%;
    height: 100px;
    background: #2998f8;
    background: -webkit-linear-gradient(#2998f8, #f2f2f2);
  }
}
</style>
